<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>影院列表</title>
    <link href="../css/header.css" rel="stylesheet">
    <link href="../css/footer.css" rel="stylesheet">
    <link href="../css/cinema/list.css" rel="stylesheet">
    <link href="../dist/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!--========= 1.上方导航栏 ====-->
<div class="index-header">
    <div class="header-logo"><a href="#" class="logo"></a></div>
    <div class="header-nav">
        <ul>
            <li><a href="../index.html" class="">首页</a></li>
            <li><a href="../films/films.html" class="">电影</a></li>
            <li class="checked"><a href="../cinema/detail.html" class="">影院</a></li>
            <li><a href="../border/border.html" class="">榜单</a></li>
            <li><a href="../border/address.html" class="address">地区</a></li>
        </ul>
    </div>
    <div class="header-search">
        <form action="" class="search-form">
            <input type="text" class="keyword" placeholder="电影/影院 搜你所想">
            <a href="" class="search-btn"></a>
        </form>
        <div class="head-login">
            <a href="customer/login.html" class="login-btn">&nbsp;&nbsp;&nbsp;&nbsp;登录</a>
        </div>
    </div>

</div>
<div class="head-wait"></div>
<div class="main">
    <!--    横幅-->
    <div class="banner">
        <div class="banner-main">
            <div class="celeInfo-left"><img src="../images/cinema2.jpg"></div>
            <div class="celeInfo-right">
                <div class="movie-brief">
                    <h1>白蛇2: 青蛇劫起</h1>
                    <ul>
                        <li>
                            <span>冒险</span>
                            <span>奇幻</span>
                            <span>动画</span>
                        </li>
                        <li>中国大陆 / 131分钟</li>
                        <li>2021-07-23 09:00中国大陆上映</li>
                    </ul>
                </div>
                <div class="action-buyBtn">
                    <div class="action clearfix">
                        <a class="wish ">
                            <div>
                                <i class="icon wish-icon"></i>
                                <span class="wish-msg">想看</span>
                            </div>
                        </a>
                        <a class="score-btn">
                            <div>
                                <i class="icon score-btn-icon"></i>
                                <span class="score-btn-msg">评分</span>
                            </div>
                        </a>
                    </div>
                    <a class="buy" href=""><h1>电影详情</h1></a>
                </div>
                <!--                电影评分-->
                <div class="moves-status">
                    <div class="movie-index">
                        <span>电影口碑</span>
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        </fieldset>
                        <div><div id="test4" class="layui-inline"><ul class="layui-rate" readonly=""><li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li><li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li><li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li><li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li><li><i class="layui-icon layui-icon-rate-half"></i></li></ul></div></div>
                    </div>
                    <div class="movie-index">
                        <span class="index-span">累计票房</span>
                        <h2>5.80</h2>
                        <span>亿</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    多条件查询-->
    <div class="container">
        <div class="tags-panel">
            <ul class="tags-lines">
                <li class="tags-line">
                    <div class="tags-title">日期:</div>
                    <ul class="tags">
                        <li class="active">
                            <a href="">今天 9月22</a>
                        </li>
                        <li class="">
                            <a  href="">明天 9月23</a>
                        </li>
                        <li class="">
                            <a  href="">后天 9月24</a>
                        </li>
                        <li class="">
                            <a href="">周六 9月25</a>
                        </li>
                        <li class="">
                            <a href="">周日 9月26</a>
                        </li>
                        <li class="">
                            <a href="">周一 9月27</a>
                        </li>
                        <li class="">
                            <a href="">周二 9月28</a>
                        </li>
                        <li class="">
                            <a href="">周三 9月29</a>
                        </li>
                        <li class="">
                            <a href="">周四 9月30</a>
                        </li>
                        <li class="">
                            <a href="">周五 10月8</a>
                        </li>
                    </ul>
                </li>

                <li class="tags-line tags-line-border">
                    <div class="tags-title">品牌:</div>
                    <ul class="tags">
                        <li class="active">
                            <a href="">全部</a>
                        </li>
                        <li class="">
                            <a href="">幸福蓝海国际影城</a>
                        </li>
                        <li class="">
                            <a href="">万达影城</a>
                        </li>
                        <li class="">
                            <a href="">中影国际影城</a>
                        </li>
                        <li class="">
                            <a href="">金逸影城</a>
                        </li>
                        <li class="">
                            <a href="">星美国际影城</a>
                        </li>
                        <li class="">
                            <a href="">卢米埃影城</a>
                        </li>
                        <li class="">
                            <a href="">保利国际影城</a>
                        </li>
                        <li class="">
                            <a href="">上影国际影城</a>
                        </li>
                    </ul>
                </li>
                <li class="tags-line tags-line-border">
                    <div class="tags-title">行政区:</div>
                    <ul class="tags">
                        <li class="active">
                            <a href="">全部</a>
                        </li>
                        <li class="">
                            <a href="">昆山市</a>
                        </li>
                        <li class="">
                            <a href="">吴中区</a>
                        </li>
                        <li class="">
                            <a href="">常熟市</a>
                        </li>
                        <li class="">
                            <a href="">张家港市</a>
                        </li>
                        <li class="">
                            <a href="">吴江区</a>
                        </li>
                        <li class="">
                            <a href="">工业园区</a>
                        </li>
                        <li class="">
                            <a href="">姑苏区</a>
                        </li>
                        <li class="">
                            <a href="">相城区</a>
                        </li>
                        <li class="">
                            <a href="">太仓市</a>
                        </li>
                        <li class="">
                            <a href="">虎丘区</a>
                        </li>
                    </ul>
                </li>
                <li class="tags-line tags-line-border">
                    <div class="tags-title">特殊厅:</div>
                    <ul class="tags">
                        <li class="active">
                            <a href="">全部</a>
                        </li>
                        <li class="">
                            <a href="">IMAX厅</a>
                        </li>
                        <li class="">
                            <a href="">CGS中国巨幕厅</a>
                        </li>
                        <li class="">
                            <a href="">杜比全景声厅</a>
                        </li>
                        <li class="">
                            <a href="">Dolby Cinema厅</a>
                        </li>
                        <li class="">
                            <a href="">RealD厅</a>
                        </li>
                    </ul>
                </li>
                <li class="tags-line tags-line-border">
                    <div class="tags-title">服务:</div>
                    <ul class="tags">
                        <li class="active">
                            <a href="">全部</a>
                        </li>
                        <li class="">
                            <a href="">可改签</a>
                        </li>
                        <li class="">
                            <a href="">可退票</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--    电影列表-->
        <div class="cinemas-list">
            <h2 class="cinemas-list-header">
                <span>影院列表</span>
                <div class="cinemas-list-filter">
                <span class="cinemas-list-filter-title ">
                <img src="../images/cinema/筛选.png">
                筛选
                </span>
                    <ul class="cinemas-list-filter-info">
                        <li class="filter-item">
                            <a href="">
                                距离近
                            </a>
                        </li>
                        <li class="filter-item">
                            <a href="">
                                价格低
                            </a>
                        </li>
                    </ul>
                </div>
            </h2>

            <ul class="cinemas-lists">
                <li>
                    <div class="cinema-cell">
                        <div class="cinema-info">
                            <a href="detail.html">CGV影城（苏州中心IMAX店）</a>
                            <p class="cinema-address">地址：吴中区工业园区工业园区苏州中心商场南区6楼14号CGV影城</p>
                        </div>
                        <div class="buy-btn">
                            <a href="detail.html">选座购票</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cinema-cell">
                        <div class="cinema-info">
                            <a href="">CGV影城（苏州中心IMAX店）</a>
                            <p class="cinema-address">地址：吴中区工业园区工业园区苏州中心商场南区6楼14号CGV影城</p>
                        </div>
                        <div class="buy-btn">
                            <a href="detail.html">选座购票</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cinema-cell">
                        <div class="cinema-info">
                            <a href="">CGV影城（苏州中心IMAX店）</a>
                            <p class="cinema-address">地址：吴中区工业园区工业园区苏州中心商场南区6楼14号CGV影城</p>
                        </div>
                        <div class="buy-btn">
                            <a href="detail.html">选座购票</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cinema-cell">
                        <div class="cinema-info">
                            <a href="">CGV影城（苏州中心IMAX店）</a>
                            <p class="cinema-address">地址：吴中区工业园区工业园区苏州中心商场南区6楼14号CGV影城</p>
                        </div>
                        <div class="buy-btn">
                            <a href="detail.html">选座购票</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cinema-cell">
                        <div class="cinema-info">
                            <a href="">CGV影城（苏州中心IMAX店）</a>
                            <p class="cinema-address">地址：吴中区工业园区工业园区苏州中心商场南区6楼14号CGV影城</p>
                        </div>
                        <div class="buy-btn">
                            <a href="detail.html">选座购票</a>
                        </div>
                    </div>
                </li>
            </ul>


        </div>
    </div>

</div>
<!--!&#45;&#45;========== 4.底部脚注 =============&ndash;&gt;-->
<div class="index-footer">
    <div class="footer-head"></div>
    <div class="footer-main">
        <p>关于视享票票通：&nbsp;<a>关于我们</a><span>&nbsp;|&nbsp;</span><a>管理团队</a><span>&nbsp;|&nbsp;</span><a>投资者关系</a>
            &nbsp;&nbsp;友情链接 :&nbsp;&nbsp;<a>支付宝</a></p>
        <p>
            商务合作邮箱：1137750012@qq.com &nbsp;
            客服电话：62170010 &nbsp;
            违法和不良信息/涉未成年人有害信息举报电话：4006018900
        </p>
        <p>
            用户举报/涉未成年人有害信息举报邮箱：tousujubao@shixiang.com&nbsp;
            舞弊线索举报邮箱：wubijubao@shixiang.com
        </p>
        <p>视享票票通用户服务协议<span>&nbsp;|&nbsp;</span>使用手册<span>&nbsp;|&nbsp;</span>隐私政策</p>
        <p>驰星视享文化传媒有限公司</p>
        <p>&nbsp;2021&nbsp;视享票票通&nbsp;shixiang.com</p>
    </div>
</div>
<script src="../js/cinema/list.js">
    layui.use(['rate'], function() {
        var rate = layui.rate;
        //半星效果
        rate.render({
            elem: '#test4'
            , value: 4.5
            , half: true
            , readonly: true
        })
    })
</script>

</body>
</html>